<template>
	<div class="update">
		<popup v-model="show" position="right" width="100%">
			<BaseHeader :title="title" showBack="true" preventGoBack="true" backText="" :back="hide" rightTxt="保存" :rightClick="save" ></BaseHeader>
			<group class="mtHeader">
		    	<x-address v-model="form.district" :title="addressTitle" :list="addressData" placeholder="请选择地址" :show.sync="showAddress"> </x-address>
				<x-input v-model="form.area" ref="area" placeholder="详细地址,如街道、楼排号等" required></x-input>
				<x-input v-model="form.userName" ref="userName" placeholder="姓名" is-type="china-name" required></x-input>
				<x-input v-model="form.phone" ref="phone" placeholder="手机号" :max="13" is-type="china-mobile" type="tel" required></x-input>
		    </group>
		    <div class="defaultAddress">
		    	<check-icon :value.sync="form.isDefault">设为默认地址</check-icon>
		    </div>
		</popup>
	</div>
</template>
<script>
import {Popup,Group,XAddress,ChinaAddressV4Data,XInput,CheckIcon  } from 'vux'
import BaseHeader from 'touch/components/common/header';

import Axios from 'touch/config/axios';

export default{
	components :{
		Popup,
		BaseHeader,
		Group,
		XAddress,
		XInput,
		CheckIcon,
	},
	props: {
        callback:{
        	type: Function,
        	required : true,
        }
    },
	data () {
		return {
			title : '',
			addressTitle : '省、市、区',
			show : false,
			addressData: ChinaAddressV4Data,
			form : {
				id : 0,
				district : [],
				area : '',
				userName : '',
				phone : '',
				isDefault : false,
				path:this.$route.path,
			},
			//验证组件发送更新请求,发送callback事件给父组件
			isUpdate : false,
			showAddress : false,
		}
	},
	methods:{
		hide(){
			this.show = false;
		},
		formValidate(){
			if(this.form.district.length==0){
				this.$vux.toast.show({type : 'text', text: '请选择省市区'});return false;
			}
			if(this.form.area=='' || this.form.userName=='' || this.form.phone==''){
				return false;
			}
			if(this.$refs.area.valid == false || this.$refs.userName.valid == false || this.$refs.phone.valid == false){
				return false;
			}
			return true;
		},
		//组建值重置
		formReset(){
			this.form.id = 0;
			this.form.district = ['','',''],
			this.form.isDefault  = false;
			this.$refs.area.reset();
			this.$refs.userName.reset();
			this.$refs.phone.reset();
			this.isUpdate = false;
			this.showAddress = false;
		},
		get(){
			Axios.Home.Address.Get(this.form.id)
	        .then(res =>{
	        	if(!res) return false;
	        	var data = res.data;
	        	this.form.id = data.id;
	        	this.form.district = [data.province,data.city,data.area];
	        	this.form.area = data.district;
	        	this.form.userName = data.userName;
	        	this.form.phone = data.phone;
	        	this.form.isDefault = data.isDefault==1 ? true : false;
	        })
		},
		save(){
			if(!this.formValidate()){
				return false;
			}
			Axios.Home.Address.Update(this.form)
	        .then(res =>{
	        	if(res.code==1){
	        		this.$vux.toast.show({type : 'warn', text: res.msg});return false;
	        	}
	        	this.$vux.toast.show({type : 'success', text: res.msg});
	        	this.isUpdate = true;
	        	this.show = false;
	        })
		},
	},
	watch:{
		show(bool){
			if(!bool && this.isUpdate){
				this.callback();
			}
			if(bool && this.form.id){
				this.get();
			}
			this.formReset();
		}
	}
}
</script>
<style>
	.update .defaultAddress{margin-top: 15px;text-align: center;}
	.update .vux-check-icon > .weui-icon-success:before, .vux-check-icon > .weui-icon-success-circle:before{color: #d62929 !important;}
</style>